<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建备用密码</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
            h1 {
        text-align: center;
        margin-top: 50px;
    }

    form {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }

    div {
        margin-bottom: 10px;
    }

    input[type="password"] {
        width: 80%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

          input[type="submit"] {
            display: block;
            width: 80%;
            margin-top:20px;
            margin-left:auto;
            margin-right:auto;
            padding: 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

    input[type="submit"]:hover {
        background-color: #006a8e;
    }
</style>
</head>
<body>
    <h1>创建备用密码</h1>
    <form method="post">
        <div>密码
        <div style="display: inline-block" id="lentishi"></div>
        </div>
        <div>
            <input type="password" id="pw1" name="m_pwd1" onkeyup="checkpasswordlen()">
        </div>
        <div>再次输入密码
        <div style="display: inline-block" id="sametishi"></div></div>
        <div>
            <input type="password" id="pw2" name="m_pwd2" onkeyup="checkpasswordsame()">
        </div>
        <div>
            <input type="submit" id="subm" value="继续">
        </div>
    </form>
</body>
</html>


<script type="text/javascript">

    function checkpasswordlen() {
    		var password = document.getElementById("pw1").value;

    		if(password.length<8) {
    		    console.log("密码长度小于8：",password)
    			 document.getElementById("lentishi").innerHTML="<br><span style='color:red' >密码长度不得小于8位</span>";
    			 document.getElementById("subm").disabled = true;
			 }else {
    		    console.log("密码长度大于8：",password)
    		    document.getElementById("lentishi").innerHTML="<br><span style='color:red' ></span>";
	    		 document.getElementById("subm").disabled = false;
			 }
    	}
    	function checkpasswordsame() {
    		var password = document.getElementById("pw1").value;
    		var repassword = document.getElementById("pw2").value;
    		if(password !== repassword) {
    		    console.log("两次密码不同：",password,repassword)
    			 document.getElementById("sametishi").innerHTML="<br><span style='color: red'>两次密码输入不一致</span>";
    			 document.getElementById("subm").disabled = true;
			 }
    		else{
    		    console.log("两次密码相同：",password,repassword)
    		    document.getElementById("sametishi").innerHTML="<br><span style='color: red'></span>";
    		    document.getElementById("subm").disabled = false;
            }
    	}
    </script>

